<template>
	<view>
		<view class="head-container" style="height:150rpx">
			  <view class="title-container" :style="'height:'+CustomBar+'px;padding-top:'+StatusBar+'px'">
				<view class="title-text" :style="'height:'+(CustomBar-StatusBar)+'px;line-height:'+(CustomBar-StatusBar)+'px'">
				  <view class="back-image flex-start" @tap="handleClickBackPage">
					<image :src="IMG_URL+'back-icon.png'"></image>
				  </view>
				  <text>{{order.status}}</text>
				</view>
			  </view>
		</view>
		
		<scroll-view class="goods-container" scroll-y="true">
				<view class="goods-list flex-between" v-for="(item,index) in order.goods_list">
					<view class="goods-image flex-center">
					  <image :src="item.cover_pic" mode='aspectFit'></image>
					</view>
					<view class="goods-detail col-between">
					  <view class="goods-name text-sl">{{item.name}}</view>
					  <view class="goods-num">x{{item.num}}</view>
					  <view class="goods-price flex-between">
						<view class="goods-price-text" v-for="(item,index) in item.attr">{{item.attr_group_name}}：{{item.attr_name}}</view>
						<view class="goods-price-num">
						  <text>￥</text>
						  <text>{{item.price}}</text>
						</view>
					  </view>
					</view>
			    </view>
				
				
				
				<!-- 订单详情 -->
				<view class="detail-container">
				  <view class="detail-list flex">
				    <!-- <text>商品总价：</text> -->
				     <text>预算总价：</text>
				    <text>￥{{order.total_price}}</text>
				  </view>
				  <view class="detail-list flex">
				    <!-- <text>订单编号：</text> -->
				    <text>预算编号：</text>
				    <text>{{order.order_no}}</text>
				    <!-- <text bindtap="copyText" data-text="{{order.order_no}}">复制</text> -->
				  </view>
				  <view class="detail-list flex">
				    <!-- <text>下单时间：</text> -->
				    <text>发起时间：</text>
				    <text>{{order.addtime}}</text>
				  </view>
				  <view class="detail-list flex">
				    <!-- <text>支付时间：</text> -->
				    <!-- <text>准备时间：</text>
				    <text>{{order.addtime}}</text> -->
				  </view>
				  
				 </view>
		</scroll-view>
	</view>
</template>

<script>
	import app from '@/App.vue';
	var t = require("@/api.js");
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	// import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		data(){
			return{
				CustomBar: 60, //顶部栏高度
				StatusBar: 20, //顶部padding
				//后端所需参数
				goodsList: [
				], //商品列表
				/*后端所需数据开始 */
				order: null,
			}
		},
		onLoad:function(e){
			 var o = this;
			 o.store= uni.getStorageSync("store");
			  var arr = this.main_getGlobal(); 
			  uni.showLoading({
			   title: "正在加载"
			 });
			 console.log('进来');
			 uni.request({
			   url: t.order.detail,
			   data: {
				 order_id: e.id,
				 mobile:arr.token,
				 type:arr.type
			   },
			   success: function (t) {
				   console.log('t的值',t);
				 o.order= t.data.data;
			   },
			   complete: function () {
				 wx.hideLoading();
			   }
			 });
		},
		onHide: function (options) {
		  
		},    
		methods:{
			 
			  
		},
	}
</script>

<style>
	/* pages/order_detail/order_detail.wxss */
	
	/* 订单状态 */
	page {
	  background-color: #fff;
	  font-family: "Microsoft YaHei";
	  font-size: 24rpx;
	  box-sizing: border-box;
	}
	
	.head-container {
	  background: linear-gradient(90deg, #3687e1, #3a6fc3);
	  position: relative;
	}
	
	.title-text {
	  text-align: center;
	  position: relative;
	}
	
	.title-text text {
	  font-size: 36rpx;
	  font-weight: 500;
	  color: rgba(255, 255, 255, 1);
	}
	
	.back-image {
	  position: absolute;
	  left: 28rpx;
	  top: 50%;
	  transform: translateY(-50%);
	  width: 50rpx;
	  height: 50rpx;
	}
	
	.back-image image {
	  width: 17rpx;
	  height: 29rpx;
	}
	
	/* 收货地址 */
	
	.address-contaienr {
	  width: 694rpx;
	  height: 190rpx;
	  background: rgba(255, 255, 255, 1);
	  box-shadow: 0px 4rpx 29rpx 0px rgba(185, 185, 185, 0.29);
	  border-radius: 8rpx;
	  position: absolute;
	  bottom: -42rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  padding: 0 28rpx;
	  background-size: 100% 6rpx;
	  background-position: left bottom;
	  background-repeat: no-repeat;
	}
	
	.user-name {
	  padding-bottom: 20rpx;
	}
	
	.user-name text {
	  font-size: 34rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.user-name text:nth-of-type(1) {
	  margin-right: 28rpx;
	  max-width: 360rpx;
	}
	
	.address-text {
	  font-size: 26rpx;
	  color: rgba(68, 68, 68, 1);
	  line-height: 38rpx;
	  height: 76rpx;
	}
	
	/* 商品列表 */
	
	.goods-container {
	  width: 694rpx;
	  background: rgba(255, 255, 255, 1);
	  box-shadow: 0px 4rpx 29rpx 0px rgba(185, 185, 185, 0.29);
	  border-radius: 8rpx;
	  margin: 70rpx auto 22rpx;
	  padding: 0 28rpx;
	  height:800rpx;
	}
	/*隐藏滚动条*/
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	
	.goods-list {
	  padding: 28rpx 0;
	  border-bottom: 1rpx solid #f4f4f4;
	}
	
	.goods-image {
	  width: 202rpx;
	  height: 170rpx;
	  background: rgba(160, 160, 160, 1);
	  border-radius: 6rpx;
	}
	
	.goods-image image {
	  max-height: 100%;
	}
	
	.goods-detail {
	  flex: 1;
	  height: 170rpx;
	  padding: 4rpx 0 4rpx 28rpx;
	}
	
	.goods-name {
	  height: 80rpx;
	  line-height: 40rpx;
	  font-size: 30rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.goods-num {
	  font-size: 22rpx;
	  color: rgba(153, 153, 153, 1);
	}
	
	.goods-price-text {
	  font-size: 22rpx;
	  color: rgba(153, 153, 153, 1);
	}
	
	.goods-price-num text:nth-of-type(1) {
	  font-size: 22rpx;
	  color: #333;
	}
	
	.goods-price-num text:nth-of-type(2) {
	  font-size: 30rpx;
	  color: #333;
	}
	
	/* 快递信息 */
	
	.kd-container {
	  padding: 10rpx 0 46rpx;
	}
	
	.kd-title {
	  font-size: 22rpx;
	  color: rgba(68, 68, 68, 1);
	}
	
	.kd-btn text {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.kd-btn  image {
	  width: 29rpx;
	  height: 29rpx;
	  margin-left: 8rpx;
	}
	
	.kd-price {
	  padding-top: 14rpx;
	}
	
	.kd-price-text text:nth-of-type(1) {
	  font-size: 28rpx;
	  color: #333;
	}
	
	.kd-price-text text:nth-of-type(2) {
	  font-size: 28rpx;
	  color: #ec1c24;
	}
	
	/* 订单详情 */
	
	.detail-container {
	  width: 694rpx;
	  background: rgba(255, 255, 255, 1);
	  box-shadow: 0px 4rpx 29rpx 0px rgba(185, 185, 185, 0.29);
	  border-radius: 8rpx;
	  margin: 0 auto 50rpx;
	  padding: 20rpx 28rpx;
	}
	
	.detail-list {
	  height: 80rpx;
	}
	
	.detail-list text:nth-of-type(1) {
	  font-size: 28rpx;
	  color: rgba(51, 51, 51, 1);
	}
	
	.detail-list text:nth-of-type(2) {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.detail-list text:nth-of-type(3) {
	  width: 74rpx;
	  height: 40rpx;
	  background: rgba(240, 240, 240, 1);
	  border-radius: 21rpx;
	  text-align: center;
	  line-height: 40rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	  margin-left: 14rpx;
	}


</style>
